<template>
  <span @click="doOpenDialog">
    <slot></slot>
  </span>
</template>
<script>
export default {
  name: 'ListSelectDialog',
  props: {
    value: [Array, String, Number],
    dataUrl: String,
    queryParams: Object,
    multiple: Boolean,
    emptyText: String,
    width: Number,
    height: Number,
  },
  data() {
    return {
      currValue: [],
      dialog: null
    }
  },
  mounted() {
    this.init()
  },
  watch: {
    data() {
      this.init()
    },
  },
  methods: {
    init() {
      this.currValue = this.value
    },
    doOpenDialog() {
      let self = this
      this.modal = this.$confirm({
        class: 'dmform-modal',
        width: this.width || 400,
        maskClosable: true,
        onOk() {
          self.doOk()
        },
        onCancel() {
          self.doClose()
        },
        content: h => h('ListSelect', {
          props: {
            value: this.value,
            dataUrl: this.dataUrl,
            queryParams: this.queryParams,
            multiple: this.multiple,
            emptyText: this.emptyText,
            height: this.height
          },
          on: {
            onChange: this.doChange
          }
        }),
      })
    },
    doChange(keys) {
      this.currValue = keys
    },
    doOk() {
      // console.log('doOk...', JSON.stringify(this.currValue))
      this.$emit('input', this.currValue)
      this.$emit('onConfirm', this.currValue)
      if (this.modal) {
        this.modal.destroy()
      }
    },
    doClose() {
      // console.log('doClose...')
      this.$emit('onCancel')
      if (this.modal) {
        this.modal.destroy()
      }
    }
  }
}
</script>
